<template>
  <div style="line-height: 60px; display: flex;">
    <div style="flex: 1;">
      <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse"></span>
        <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
          <el-breadcrumb-item :to="'/home'">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-dropdown style="width: 112px; cursor: pointer; margin-right: 40px">
      <div>
        <img :src="user.image" alt=""
             style="width: 32px; position: relative; top: 10px; right: 5px; margin-left: 10px; border-radius: 50%;">
        <span>{{user.name | ellipsis}}</span>
        <i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      </div>
      <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
        <el-dropdown-item style="font-size: 14px; padding: 5px 0">
          <span @click="resetPass"><i class="el-icon-refresh"/>修改密码</span>
        </el-dropdown-item>
        <el-dropdown-item style="font-size: 14px; padding: 5px 0">
          <span style="text-decoration: none" @click="loginOut"><i class="el-icon-switch-button"/>退出</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" :before-close="shutDown" width="30%" style="margin-top: -10vh;">
      <el-form :model="passData" status-icon :rules="rules" ref="passData" label-width="80px" size="small">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input autocomlete="off" @blur="resetOldPass" show-password v-model="passData.oldPass"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input autocomlete="off" show-password v-model="passData.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pass">
          <el-input autocomlete="off" show-password v-model="passData.pass"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shutDown">取 消</el-button>
        <el-button type="primary" @click="subPass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    collapseBtnClass: String,    //按钮图标切换
    collapse: {},  //控制侧边收缩  父传子函数，子组件用{}接收，也就是函数类型
    user: Object, //更新后数据
  },
  data(){
    var password = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passData.pass !== '') {
          this.$refs.passData.validateField('pass');
        }
        callback();
      }
    };
    var pass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passData.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      firstPlayFlag: true, //登陆成功提示
      dialogFormVisible: false, //修改密码弹窗
      //密码信息
      passData: {
        userId: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).userId : {},
        password: '', //密码
        pass: '', //确认密码
      },
      //校验规则
      rules: {
        oldPass: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
        ],
        password: [
          { validator: password, trigger: 'blur' },
          {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
        ],
        pass: [
          { validator: pass, trigger: 'blur' },
          {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
        ],
      },
      code: false,
    }
  },
  methods: {
    //重置密码
    resetPass(){
      this.dialogFormVisible = true
    },
    //查询旧密码是否正确
    resetOldPass(){
      if(this.passData.oldPass.length >= 6){
        this.request.post("/user/resetPass", this.passData).then(
            res => {
              if(res.code === '200'){
                this.code = true
              }else {
                this.code = false
              }
            })
      }else {
        this.code = false
      }
    },
    //修改密码
    subPass(){
      this.$refs["passData"].validate((valid) => {
        if (valid) {
          if(this.code){
            this.request.post("/user/resetUserPass", this.passData).then(
                res => {
                  if(res.code === '200'){
                    this.open()
                  }else {
                    this.$message.error(res.msg);
                  }
                })
          }else {
            this.$message.error("旧密码错误！")
          }
        }
      });
    },
    //密码修改成功提示
    open() {
      this.$alert('您的密码修改成功，请重新登陆！', '', {
        confirmButtonText: '确定',
        showClose: false,
        callback: action => {
          this.loginOut()
        }
      });
    },
    //关闭弹窗
    shutDown(){
      this.dialogFormVisible = false
      //表单验证信息重置
      this.resetForm("passData");
    },
    //表单重置
    resetForm(formName) {
      this.$nextTick(function(){
        this.$refs[formName].resetFields();
      })
    },
    //登录成功提示
    success(res){
      this.firstPlayFlag = false,
      this.$notify({
        title: `登录成功`,
        dangerouslyUseHTMLString: true,
        message: `欢迎您回来<b style="color: #42b983"> ${this.name} </b>！`,
        type: 'success'
      });
    },
    //退出登录
    loginOut(){
      this.$store.commit("logOut");
      this.$message.success("退出成功")
    }
  },
  filters: {
    //文字数超出时，超出部分使用...
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 3) {
        return value.slice(0, 3) + '...'
      }
      return value
    }
  },
  computed: { //计算属性
    currentPathName(){
      return this.$store.state.currentPathName; //需要监听的数据
    }
  },
}
</script>

<style scoped>

</style>